<template>
  <div>
    <el-button :icon="Plus" :disabled="!categoryStore.category3Id" type="primary" @click="toAddSpuInfo()">添加SPU</el-button>
    <el-table border :data="spuList">
      <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row,$index}">
          <el-button title="添加SKU" type="primary" :icon="Plus" @click="toAddSkuInfo(row)"></el-button>
          <el-button title="修改SPU" type="primary" :icon="Edit" @click="toEditSpuInfo(row)"></el-button>
          <el-button title="查看SKU列表" type="info" :icon="InfoFilled" @click="toAddSkuListInfo(row.id)"></el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" 
            :icon="InfoFilled" icon-color="#626AEF" 
            title="真的确定要删除此条数据么?" @confirm="deleteSpuInfo(row.id)">
            <template #reference>
              <el-button title="删除SPU" type="danger" :icon="Delete"></el-button>
            </template>
        </el-popconfirm>
        </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:currentPage="currentPage" :page-size="pageSize"
    :page-sizes="[3,6,9,12]" :small="small" :disabled="disabled" :background="background"
    layout="prev,pager,next,jumper,->,sizes,total" :total="total"
    @size-change="handleSizeChange" @current-change="handleCurrentChange"/>

    <!-- 弹出框 -->
    <el-dialog v-model="dialogSkuTableVisible" title="查看sku数据列表">
    <el-table :data="skuList" v-loading="loading">
      <el-table-column label="名称" prop="skuName"/>
      <el-table-column label="价格(元)" prop="price"/>
      <el-table-column label="重量(kg)" prop="weight"/>
      <el-table-column label="默认图片">
        <template v-slot="{row}">
          <el-image :src="row.skuDefaultImg" style="width:100px;height:100px;"></el-image>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  </div>
</template>

<script lang="ts">
export default {
name:"SpuList"
}
</script>
<script lang="ts" setup>
import {reqDeleteSpuInfo, reqGetSpuListData} from '@/api/product/spu'
import {ref,watch} from 'vue'
import {Plus,Edit,Delete,InfoFilled} from '@element-plus/icons-vue'
import {useCategoryListStore} from '@/stores/categoryList'
import { ElMessage } from 'element-plus'
import { reqGetSkuListData } from '@/api/product/sku'
const emits = defineEmits(['changeScene',"getSpuInfo"]) 
const categoryStore = useCategoryListStore()
const CategorySelector = useCategoryListStore()

// 与分页器相关的变量
const currentPage = ref<number>(1)
const pageSize = ref<number>(5)
const total = ref<number>(1)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const spuList = ref([])
const skuList = ref([])
const dialogSkuTableVisible = ref(false)
const loading = ref(false)
// 1. 定义一个获取spu列表数据的函数
const getSpuListData = async()=>{
  const result = await reqGetSpuListData(currentPage.value,pageSize.value,CategorySelector.category3Id)
  spuList.value = result.records
  total.value = result.total
  // console.log('res',result);
  
}
// 2. 监听三级导航数据的变化
watch(()=>CategorySelector.category3Id,category3Id=>{
  if(!category3Id){
    spuList.value = []
    return 
   }
   getSpuListData()
},{immediate:true})

// 分页器相关的两个事件
// 3. 更改每页显示条数时触发的事件处理程序
const handleSizeChange = (val:number)=>{
  pageSize.value = val
  currentPage.value = 1
  getSpuListData()
}
// 4. 根据当前页码进行切换时触发的函数
const handleCurrentChange = (val:number)=>{
  currentPage.value = val
  getSpuListData()
}
// 5. 删除Spu
const deleteSpuInfo = async (id:number)=>{
  await reqDeleteSpuInfo(id)
  ElMessage.success('删除spu成功...')
  getSpuListData()
}

// 6. 点击编辑按钮跳转
const toEditSpuInfo = (row)=>{
  // 跳转到spuForm.vue页面
  emits('changeScene',2)
  // 将当前待编辑的数据传递给父组件index.vue
  // emits('getSpuInfo',row)
  emits('getSpuInfo',{
    ...row,
    spuImageList:[],
    spuSaleAttrList:[]
  })
}

// 7. 
const toAddSpuInfo=()=>{
  // 跳转到SpuForm
  emits('changeScene',2)
  // 添加时清除里面的数据
  emits('getSpuInfo',{})
}

// 8. 点击添加跳转到SkuForm
const toAddSkuInfo =(row)=>{
  // 跳转到SkuForm
  emits('changeScene',3)
  // 把参数传过去
  emits('getSpuInfo',row)
}

// 9. 点击查看sku
const toAddSkuListInfo =async(id:number)=>{
  dialogSkuTableVisible.value=true
  loading.value = true
  skuList.value = await reqGetSkuListData(id)
  loading.value= false
}
</script>


<style>

</style>